import { NavBar, SearchBar, Grid, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import yi from '../../assets/按医院.png'
import ke from '../../assets/按科室.png'
import doc from '../../assets/按医生.png'
function Index() {
  const nav=useNavigate()
  
  const handleBack = () => {
    nav(-1) // 返回上一个页面
  }

  const filters = ['官方来源','医生本人','平台认证','诊前退款']
  const quickCats = ['内科','外科','皮肤科','男科','妇产科']

  return (
    <div style={{background:'#fff',minHeight:'100vh'}}>
      {/* 顶部小标题栏 */}
      <NavBar onBack={handleBack}>网上预约挂号_在线咨询医生_就医挂号服务...</NavBar>

      {/* 绿色渐变头部 + 搜索 */}
      <div style={{
        background:'linear-gradient(180deg,#1fc89a,#1fc89a 72%, #ffffff 72%)',
        padding:'12px'
      }}>
        <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
          <div style={{color:'#fff',fontSize:'16px'}}>北京市 ▾</div>
          <div style={{flex:1,background:'#fff',borderRadius:'999px',padding:'4px 10px'}}>
            <SearchBar placeholder='搜索医院、科室、医生' style={{'--background':'#fff'}} onSearch={() => nav('/search')}/>
          </div>
        
        </div>
      </div>
      

      {/* 四大保障 */}
      <div style={{
        background:'#f8f8f8',
        margin:'12px',
        borderRadius:'12px 12px 0 0',
        padding:'16px'
      }}>
        <div style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
          {filters.map(f => (
            <div key={f} style={{display:'flex',alignItems:'center',gap:'6px'}}>
              <div style={{
                width:'20px',
                height:'20px',
                borderRadius:'50%',
                background:'#e8e8e8',
                display:'flex',
                alignItems:'center',
                justifyContent:'center',
                fontSize:'12px',
                color:'#666'
              }}>✓</div>
              <span style={{fontSize:'12px',color:'#999'}}>{f}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 分类入口 */}
      <div style={{background:'#fff',margin:'0 12px 12px 12px',borderRadius:'0 0 12px 12px',padding:'14px',boxShadow:'0 0 0 1px #f0f0f0'}}>

        {/* 三大类入口 */}
        <Grid columns={3} gap={16} style={{marginTop:'14px'}}>
          <Grid.Item>
            <div style={{textAlign:'center',cursor:'pointer'}} onClick={()=>nav('/yu')}>
              <img src={yi} alt="" />
              <div style={{marginTop:8,fontSize:20}}>按医院</div>
              <div style={{color:'#9e9e9e',fontSize:12}}>全国知名医院</div>
            </div>
          </Grid.Item>
          <Grid.Item>
            <div style={{textAlign:'center',cursor:'pointer'}} onClick={()=>nav('/ji')}>
             <img src={ke} alt="" />
              <div style={{marginTop:8,fontSize:20}}>按科室</div>
              <div style={{color:'#9e9e9e',fontSize:12}}>按科室挂号</div>
            </div>
          </Grid.Item>
          <Grid.Item>
            <div style={{textAlign:'center',cursor:'pointer'}} onClick={()=>nav('/fu')}>
              <img src={doc} alt="" />
              <div style={{marginTop:8,fontSize:20}}>按医生</div>
              <div style={{color:'#9e9e9e',fontSize:12}}>全国知名专家</div>
            </div>
          </Grid.Item>
        </Grid>

        {/* 快捷科室五宫格 */}
        <div style={{display:'flex',justifyContent:'space-around',marginTop:'16px'}}>
          {quickCats.map(c => (
            <div key={c} style={{textAlign:'center',cursor:'pointer',flex:1}} onClick={()=>nav('')}>
              <div style={{
                width:'48px',
                height:'48px',
                margin:'0 auto 8px',
                borderRadius:'12px',
                background:'#f0f9ff',
                display:'flex',
                alignItems:'center',
                justifyContent:'center',
                fontSize:'24px',
                color:'#1fc89a'
              }}>
                {c === '内科' && '🫀'}
                {c === '外科' && '✂️'}
                {c === '皮肤科' && '🤚'}
                {c === '男科' && '🧬'}
                {c === '妇产科' && '👩'}
              </div>
              <div style={{fontSize:'12px',color:'#333'}}>{c}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 我的挂号 */}
      <div style={{background:'#fff',margin:'12px',borderRadius:'12px',boxShadow:'0 0 0 1px #f0f0f0'}}>
        <List header={
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <div style={{display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:18,height:18,borderRadius:4,background:'#e8fff5',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#21c492'}}>✓</span>
              <span style={{fontSize:18,fontWeight:600}}>我的挂号</span>
            </div>
            <span style={{color:'#9e9e9e',cursor:'pointer'}} onClick={()=>nav('/order')}>查看记录 ›</span>
          </div>
        }>
        </List>
      </div>

      {/* 热门医院列表 */}
      <div style={{background:'#fff',margin:'12px',borderRadius:'12px',boxShadow:'0 0 0 1px #f0f0f0'}}>
        <List header={<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:18,fontWeight:600}}>热门医院</span><span style={{color:'#9e9e9e',cursor:'pointer'}} onClick={()=>nav('/more')}>更多 ›</span></div>}>
          <List.Item extra={<span style={{color:'#9e9e9e'}}>10.2km</span>} description={<div>
            <div style={{marginBottom:6}}>
              <span style={{color:'#16a34a',display:'inline-block',marginRight:6,border:'1px solid #d1fae5',padding:'0 6px',borderRadius:4,fontSize:12}}>公立</span>
              <span style={{color:'#16a34a',display:'inline-block',border:'1px solid #d1fae5',padding:'0 6px',borderRadius:4,fontSize:12}}>三级乙等</span>
            </div>
            <div style={{marginTop:0,color:'#666'}}>科室：神经外科、神经外科中心、周围神...</div>
            <div style={{marginTop:4,color:'#666'}}>地址：北京市朝阳区安外北苑路3号</div>
          </div>} prefix={<div style={{width:48,height:48,borderRadius:8,background:'#eef7ff',display:'flex',alignItems:'center',justifyContent:'center'}}>🏥</div>}>
            航空总医院
          </List.Item>

          <List.Item extra={<span style={{color:'#9e9e9e'}}>1.9km</span>} description={<div>
            <div style={{marginBottom:6}}>
              <span style={{color:'#16a34a',display:'inline-block',marginRight:6,border:'1px solid #d1fae5',padding:'0 6px',borderRadius:4,fontSize:12}}>公立</span>
              <span style={{color:'#16a34a',display:'inline-block',border:'1px solid #d1fae5',padding:'0 6px',borderRadius:4,fontSize:12}}>其他</span>
            </div>
            <div style={{marginTop:0,color:'#666'}}>科室：呼吸内科、心血管内科、神经内科...</div>
            <div style={{marginTop:4,color:'#666'}}>地址：北京市东城区美术馆东街18号</div>
          </div>} prefix={<div style={{width:48,height:48,borderRadius:8,background:'#eef7ff',display:'flex',alignItems:'center',justifyContent:'center'}}>🏥</div>}>
            北京市隆福医院
          </List.Item>
        </List>
      </div>
    </div>
  )
}

export default Index
